<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="heroType" onclick="chooseType()">
    <option value="-1">...请选择...</option>
    <option value="1">ADC</option>
    <option value="2">坦克</option>
    <option value="3">法师</option>
    <option value="4">打野</option>
    <option value="5">上单</option>
</select>

<select id="heroName" onclick="show()"></select>
<select id="heroSkill"></select>

<script>
    var heroType = document.getElementById("heroType");
    var heroName = document.getElementById("heroName");
    var heroSkill = document.getElementById("heroSkill");

    var adcHeroes = ["EZ", "VN", "女警"];
    var tankHeroes = ["石头人", "龙龟", "奥恩"];
    var apHeroes = ["凯撒", "凯南", "加里奥"];
    var topHeroes = ["奥拉夫", "剑姬", "刀妹"];
    var jungleHeroes = ["瞎子", "龙女", "狮子狗"];


    var EzSkill = ["奥术跃迁","精准弹幕"];
    var stoneSkill=["势不可挡","地震碎片"];
    var caesarSkill=["死亡蔓延","死亡之子"];



    function chooseType() {
        var typeValue = heroType.value;
        console.log(typeValue);
        console.log(typeof typeValue);
        //运行后要清除原先的内容
        heroName.innerHTML = "<option>...请选择....</option>"
        switch (typeValue) {
            case "1":
                chooseHero(adcHeroes);
                break;
            case "2":
                chooseHero(tankHeroes);
                break;
            case "3":
                chooseHero(apHeroes);
                break;
            case "4":
                chooseHero(jungleHeroes);
                break;
            case "5":
                chooseHero(topHeroes);
                break;
        }

    }

    function chooseHero(heroes) {
        heroSkill.innerHTML = "<option>...请选择....</option>";
        for (var i = 0; i < heroes.length; i++) {
            var hero = heroes[i];
            console.log(hero);
            heroName.innerHTML += "<option value= '"+hero+"'>" + hero + "</option>"
        }
    }

    function show() {
        var skillType = heroName.value;
        heroSkill.innerHTML = "<option>"+"...请选择"+"</option>"
        switch (skillType){
            case "EZ":
                chooseSkill(EzSkill);
                break;
            case "石头人":
                chooseSkill(stoneSkill);
                break
            case "凯撒":
                chooseSkill(caesarSkill);
                break
        }
    }

    function chooseSkill(skills) {
        for (var i = 0; i < skills.length; i++) {
            var hero = skills[i];
            console.log(hero);
            heroSkill.innerHTML += "<option>" + hero + "</option>"
        }
    }

</script>
</body>
</html>